import style from './style.module.scss'
import { Button } from 'antd'
import { ForwardOutlined, CaretLeftFilled, MenuUnfoldOutlined } from '@ant-design/icons'
import { useBasicDataStore } from '@/stores/basicDataStore'
import { useHoverStore } from '@/stores/hoverStore'
import { useCompareStore } from '@/stores/compareStore'
import { Link } from 'react-router-dom'
import SpecificInfo from './SpecificInfo'
import type { StoreInfo } from '@/Interface/StoreInfoInterface';
import CmpRadarChart from "../echarts/CmpRadarChart";

export default function BasicInfo() {

  const basicData = useBasicDataStore((state) => state.basicData);
  const ishovered = useHoverStore((state) => state.ishovered);
  const setHover = useHoverStore((state) => state.setHover);
  const compare = useCompareStore((state) => state.compare);
  const setCompare = useCompareStore((state) => state.setCompare);


  function action() {
    setHover(false)
    setCompare(false)
  }

  return (
    <>
      <div className={`${style.basicInfo} ${ishovered ? style.rightshow : style.hide} `}>
        <div className={style.basicTop}>
          <div className={`${compare && style.showBorder} `}>
            <Button className={style.svgSize} ghost onClick={() => setCompare(!compare)}>
              <CaretLeftFilled rotate={compare ? 180 : 0} />
              对比
            </Button>
          </div>
          <div className={style.svgSize}>
            <Link to="/store">
              查看详情
              <ForwardOutlined />
            </Link>
          </div>
          <div>
            <Button className={style.unfold} ghost onClick={action}>
              <MenuUnfoldOutlined />
            </Button>
          </div>
        </div>
        <SpecificInfo store={basicData as StoreInfo} />
        <div className={style.radar}>
          <CmpRadarChart store={basicData as StoreInfo} />
        </div>
      </div>
    </>
  )
}
